<template>
  <div class="commo">
    <el-table v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)" :data="commshowdata" stripe style="width: 100%" height="650px">
      <el-table-column label="ID" width="250">
        <template slot-scope="scope">
          <span style="margin-left: 0px">{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="商品名称" width="250">
        <template slot-scope="scope">
          <span style="margin-left: 0px">{{ scope.row.dtitle }}</span>
        </template>
      </el-table-column>
      <el-table-column label="单价" width="200">
        <template slot-scope="scope">
          <span style="margin-left: 0px">{{ scope.row.actualPrice }}</span>
        </template>
      </el-table-column>
      <el-table-column label="日期" width="300">
        <template slot-scope="scope">
          <span style="margin-left: 0px">{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="图片" width="370">
        <template slot-scope="scope">
          <div style="margin-left: 0px" class="commdityimg">
            <img :src="scope.row.mainPic" alt="">
          </div>
        </template>
      </el-table-column>
      <el-table-column label="日销售额" width="250">
        <template slot-scope="scope">
          <span style="margin-left: 0px">{{ scope.row.dailySales }}</span>
        </template>
      </el-table-column>
    </el-table>
    <sorter :user="commodity" @showList="showList"></sorter>
  </div>
</template>

<script>
import { axiosApi } from '../js/api'
import sorter from '../components/sorter.vue'
export default {
  data() {
    return {
      // 数据源
      commodity: [
      ],
      //展示的数据源
      commshowdata: [],
      //loading
      loading:true
    }
  },
  //计算属性
  computed: {
  },
  //监听
  watch: {
    commodity(){
      this.loading = false
    }
  },
  //方法
  methods: {
    showList(val) {
      this.commshowdata = val
    },
  },
  //组件
  components: {
    sorter,
  },
  // 生命周期
  mounted() {
    // 接受axios传送的值
    axiosApi.get1().then((val) => {
      this.commodity = val.list
      // 把数据源传给分页器
    })
  },
  created() {
  },
}
</script>

<style lang="less" scoped>
.commo {
  margin-top: 30px;
  // width: 85vw;

  .commdityimg {
    width: 100px;
    height: 100px;
  }

  .commdityimg>img {
    width: 100%;
    height: 100%;
  }
}
</style>